<!--
 * @Description: 财务开票-财务核对弹窗
 * @Author: Li Yujie
 * @Date: 2021/1/22
 * @Last Modified by: Li Yujie
 * @Last Modified time: 2021/1/22
-->
<template>
    <div class="wrapper">
        <el-dialog
            title="财务核对"
            :visible.sync="dialogVisible"
            width="1200px"
            :close-on-click-modal="false"
        >
            <div
                class="dialog-wrapper"
                v-loading="loading"
            >
                <!--基础开票金额-->
                <div class="base-info">
                    <div class="base-info-item">
                        可开票金额：<span style="color: #DB6F18">￥{{ detailInfo.money_can_invoice }}</span>
                        <el-popover
                            placement="bottom"
                            width="200"
                            trigger="hover"
                            content="商家可以申请开具发票的金额"
                        >
                            <div
                                slot="reference"
                                style="display: inline-block"
                            >
                                <i class="el-icon-question"/>
                            </div>
                        </el-popover>
                    </div>
                    <div class="base-info-item">
                        待开票金额：<span style="color: #DB6F18">￥{{ detailInfo.money_invoice_ing }}</span>
                        <el-popover
                            placement="bottom"
                            width="200"
                            trigger="hover"
                            content="商家已经申请开具发票金额，等待财务人员处理开票申请"
                        >
                            <div
                                slot="reference"
                                style="display: inline-block"
                            >
                                <i class="el-icon-question"/>
                            </div>
                        </el-popover>
                    </div>
                    <div class="base-info-item">
                        已开票金额：<span style="color: #DB6F18">￥{{ detailInfo.money_has_invoice }}</span>
                        <el-popover
                            placement="bottom"
                            width="200"
                            trigger="hover"
                            content="已经给商家开具发票的金额"
                        >
                            <div
                                slot="reference"
                                style="display: inline-block"
                            >
                                <i class="el-icon-question"/>
                            </div>
                        </el-popover>
                    </div>
                    <div class="base-info-item">
                        总金额：<span style="color: #DB6F18">￥{{ detailInfo.money }}</span>
                        <el-popover
                            placement="bottom"
                            width="200"
                            trigger="hover"
                            content="商家已支付总金额"
                        >
                            <div
                                slot="reference"
                                style="display: inline-block"
                            >
                                <i class="el-icon-question"/>
                            </div>
                        </el-popover>
                    </div>
                </div>
                <!--详细金额-->
                <div class="detail-info">
                    <div class="detail-info-item">
                        <div class="title">
                            已支付分佣金额
                            <span>支出的分佣金额的总数</span>
                        </div>
                        <div class="money">
                            ￥{{ detailInfo.commission_money }}
                        </div>
                        <div class="base-money">
                            <div class="base-money-item">
                                可开票金额:<span style="color: #333">￥{{ detailInfo.commission_money_can_invoice }}</span>
                            </div>
                            <div class="base-money-item">
                                待开票金额:<span style="color: #333">￥{{ detailInfo.commission_money_invoice_ing }}</span>
                            </div>
                            <div class="base-money-item">
                                已开票金额:<span style="color: #333">￥{{ detailInfo.commission_money_has_invoice }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="detail-info-item">
                        <div class="title">
                            已支付手续费
                            <span>支出的手续费总额</span>
                        </div>
                        <div class="money">
                            ￥{{ detailInfo.pay_service_money }}
                        </div>
                        <div class="base-money">
                            <div class="base-money-item">
                                可开票金额:<span style="color: #333">￥{{ detailInfo.pay_service_money_can_invoice }}</span>
                            </div>
                            <div class="base-money-item">
                                待开票金额:<span style="color: #333">￥{{ detailInfo.pay_service_money_invoice_ing }}</span>
                            </div>
                            <div class="base-money-item">
                                已开票金额:<span style="color: #333">￥{{ detailInfo.pay_service_money_has_invoice }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <!--tab-->
                <el-tabs
                    v-model="filterData.status"
                    @tab-click="getTableData(1)"
                >
                    <el-tab-pane
                        label="全部"
                        name="99"
                    />
                    <el-tab-pane
                        label="未申请开票账单"
                        name="1"
                    />
                    <el-tab-pane
                        label="待开票账单"
                        name="2"
                    />
                    <el-tab-pane
                        label="已开票账单"
                        name="3"
                    />
                </el-tabs>
                <!--筛选-->
                <!-- 筛选-->
                <div class="filter-view">
                    <div class="header-new-box">
                        <p class="header-new-box-title">
                            创建时间
                        </p>
                        <el-date-picker
                            v-model="createTimeRange"
                            type="datetimerange"
                            range-separator="-"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :default-time="['00:00:00', '23:59:59']"
                            size="medium"
                            style="width: 356px"
                            value-format="timestamp"
                        />
                    </div>
                    <div class="header-new-box">
                        <p class="header-new-box-title">
                            申请时间
                        </p>
                        <el-date-picker
                            v-model="applyTimeRange"
                            type="datetimerange"
                            range-separator="-"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :default-time="['00:00:00', '23:59:59']"
                            size="medium"
                            style="width: 356px"
                            value-format="timestamp"
                        />
                    </div>
                    <div class="header-new-box">
                        <p class="header-new-box-title">
                            账单类型
                        </p>
                        <el-select
                            v-model="filterData.type"
                            filterable
                            placeholder="全部"
                            size="medium"
                            style="width: 152px"
                            @change="getTableData(1)"
                        >
                            <el-option
                                v-for="item in typeList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </div>
                </div>
                <!--列表-->
                <el-table
                    :data="tableData"
                    height="350"
                    style="width: 100%; margin-top: 24px"
                    ref="tempLateName"
                    class="data-table"
                    :header-cell-style="{background:'#f2f2f2',color:'#333',fontWeight: 500}"
                >
                    <el-table-column
                        label="序号"
                        align="center"
                        width="80"
                        type="index"
                    />
                    <el-table-column
                        prop="bill_no"
                        label="账单编号"
                        show-overflow-tooltip
                        align="left"
                        :formatter="emptyFormatter"
                    />
                    <el-table-column
                        label="账单类型"
                        show-overflow-tooltip
                        align="left"
                        :formatter="emptyFormatter"
                    >
                        <template slot-scope="scope">
                            <div v-if="scope.row.type === 1">佣金</div>
                            <div v-if="scope.row.type === 2">手续费</div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="desc"
                        label="财务详情"
                        show-overflow-tooltip
                        align="left"
                        :formatter="emptyFormatter"
                    />
                    <el-table-column
                        prop="money"
                        label="金额（元）"
                        show-overflow-tooltip
                        align="center"
                        :formatter="emptyFormatter"
                    />
                    <el-table-column
                        label="账单创建时间"
                        align="center"
                        width="200"
                        :formatter="emptyFormatter"
                    >
                        <template slot-scope="scope">
                            {{ scope.row.create_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm:ss') }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="申请时间"
                        align="center"
                        width="200"
                        :formatter="emptyFormatter"
                    >
                        <template slot-scope="scope">
                            {{ scope.row.invoice_create_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm:ss') }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="开票状态"
                        align="center"
                        width="240"
                    >
                        <template slot-scope="scope">
                            <div
                                v-if="scope.row.status === 1"
                                style="color: #333"
                            >未申请开票</div>
                            <div
                                v-if="scope.row.status === 2"
                                style="color: #F56C6C"
                            >申请中</div>
                            <div
                                v-if="scope.row.status === 3"
                                style="color: #999"
                            >已开票</div>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- /分页 -->
                <div class="pagination-wrapper clearfix">
                    <el-pagination
                        layout="total, prev, pager, next, jumper"
                        background
                        :current-page.sync="page.now_page"
                        :total="page.total_count"
                        :page-size="page.page_size"
                        @current-change="getTableData"
                    />
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'FinanceCheck',
    data() {
        return {
            dialogVisible: false,
            loading: false,
            filterData: {
                hire_no: '',
                status: '99',
                type: 99,
                create_start_time: '',
                create_end_time: '',
                invoice_create_start_time: '',
                invoice_create_end_time: '',
            },
            tableData: [],
            detailInfo: {},
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 20
            },
            typeList: [
                {label: '全部', value: 99},
                {label: '分佣', value: 1},
                {label: '手续费', value: 2},
            ],
            applyTimeRange: [],
            createTimeRange: [],
        };
    },
    watch: {
        createTimeRange(value) {
            this.filterData.create_start_time = value ? value[0] / 1000 : '';
            this.filterData.create_end_time = value ? value[1] / 1000 : '';
            this.getTableData(1);
        },
        applyTimeRange(value) {
            this.filterData.invoice_create_start_time = value ? value[0] / 1000 : '';
            this.filterData.invoice_create_end_time = value ? value[1] / 1000 : '';
            this.getTableData(1);
        },
    },
    mounted() {
    },
    methods: {
        show(hire_no) {
            this.filterData.hire_no = hire_no;
            this.dialogVisible = true;
            this.loading = true;
            this.getDetailInfo();
            this.getTableData();
        },

        /**
         * @description 获取数据
         */
        getDetailInfo() {
            let params = {
                hire_no: this.filterData.hire_no
            };

            this.$post('/student/hire_invoice%5Cget_info', params, resp => {
                if (resp.code === 1) {
                    this.detailInfo = resp.data;
                }
                this.loading = false;
            });
        },

        /**
         * @description 获取列表数据
         * @param page
         */
        getTableData(page) {

            let params = {...this.filterData};

            params.status = Number(params.status);
            params.page_id = page || this.page.now_page;

            this.$post('/student/hire_invoice%5Cget_bill_list', params, resp => {
                if (resp.code === 1) {
                    this.tableData = resp.data.list;
                    this.page = resp.data.page;
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
                this.loading = false;
            });
        },
        /**
         * @description 过滤函数
         */
        emptyFormatter(row, column, val) {
            if (!val) return '--';
            return val;
        },
    }
};
</script>

<style scoped lang="less">
.wrapper {

    .dialog-wrapper {
        .base-info {
            height: 50px;
            background: #FFF6E8;
            border-radius: 4px;
            display: flex;
            align-items: center;
            padding: 0 24px;
            margin: 0 20px;
            box-sizing: border-box;
            .base-info-item {
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #333333;
                margin-right: 32px;
                i {
                    color: #666;
                }
            }
        }
        .detail-info {
            display: flex;
            margin-top: 12px;
            padding: 0 20px;
            .detail-info-item {
                flex: 1;
                height: 178px;
                background: #F5FAFF;
                box-sizing: border-box;
                padding:  24px 24px 0;
                .title {
                    font-size: 16px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: #333333;
                    span {
                        font-size: 12px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #999999;
                        margin-left: 12px;
                    }
                }
                .money {
                    font-size: 36px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: #1890FF;
                    text-align: center;
                    padding: 24px 0;
                    border-bottom: 1px solid #D3DFE8;
                }
                .base-money {
                    display: flex;
                    .base-money-item {
                        height: 25px;
                        flex: 1;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        margin-top: 13px;
                        border-right: 1px solid #D3DFE8;
                        font-size: 14px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #999999;
                        i {
                            margin-left: 4px;
                        }
                        &:last-child {
                            border-right: 0;
                        }
                    }
                }
                &:first-of-type {
                    margin-right: 12px;
                }
            }
        }
        /*el-tabs*/

        /deep/ .el-tabs {

            .el-tabs__nav-wrap {
                height: 54px;
                padding-left: 24px;

                .el-tabs__nav-scroll {
                    .el-tabs__nav {
                        height: 54px;
                        line-height: 54px;
                    }
                }
            }
        }
        /*筛选*/

        .filter-view {
            margin-top: 12px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            flex-wrap: wrap;

            .header-new-box {
                display: flex;
                align-items: center;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #333333;
                white-space: nowrap;
                margin-right: 24px;

                &-title {
                    margin-right: 16px;
                    white-space: nowrap;
                }
            }

            .input-with-select {
                width: 300px;
                margin-right: 32px;
            }

            /deep/ .input-with-select .el-input-group__prepend {
                background-color: #fff;
                width: 130px;
            }
        }

        /* 分页 */

        .pagination-wrapper {
            padding-top: 10px;
            .el-pagination {
                float: right;
                padding: 0;
                background-color: transparent;
            }
        }
    }

    /deep/ .el-dialog {
        margin-top: 5vh!important;
    }
    /deep/ .el-dialog__header {
        padding-top: 10px;
        box-shadow:0 1px 0 0 rgba(233,233,233,1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        border-radius: 4px 4px 0 0;
        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }
        .el-icon-close:before {
            color: rgb(194,194,194);
            font-size: 17px;
            font-weight: bold;
        }
        .el-dialog__headerbtn {
            top: 14px;
        }
    }
    /deep/ .el-dialog__body {
        padding: 24px;
    }

}
</style>
